<template>
  <div ref="warp" class="contentWarpBox">
    <div class="searchInfo">
      <div class="left">
        <el-input v-model="searchInfo.projectName" placeholder="商机名称" style="width:120px;" />
        <el-input v-model="searchInfo.nickName" placeholder="用户昵称" style="width:120px;" />
        <el-button type="primary" @click="searchInfoMation">搜 索</el-button>
      </div>
    </div>
    <el-table ref="table" border :data="tableData" stripe :height="this.$getTableHeight">
      <el-table-column prop="content" show-overflow-tooltip label="留言内容" />
      <el-table-column prop="projectName" show-overflow-tooltip label="留言商机" />
      <el-table-column show-overflow-tooltip label="留言会员">
        <template slot-scope="scope">{{ scope.row.nickName ? scope.row.nickName :'&nbsp;' }}</template>
      </el-table-column>
      <el-table-column prop="phone" show-overflow-tooltip label="留言号码" />
      <el-table-column show-overflow-tooltip label="是否注册">
        <template
          slot-scope="scope"
        >{{ scope.row.id ? scope.row.registered === true ? "是" :"否" :"" }}</template>
      </el-table-column>
      <el-table-column prop="creationTime" show-overflow-tooltip label="留言时间" />
      <el-table-column prop="replyNum" show-overflow-tooltip label="留言回复数" />
      <el-table-column prop="latestTime" show-overflow-tooltip label="最新回复时间" />
      <el-table-column label="操作" width="110">
        <template slot-scope="scope">
          <span v-if="scope.row.id">
            <span class="_primary" @click="getAnswer(scope.row.id)">详情</span>
            <span
              v-if="accreditChildren.deleteMessageManage"
              class="_delete"
              @click="deleteInfo(scope.row)"
            >删除</span>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination clearfix">
      <Pagination
        class="right"
        :total-count="totalCount"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <el-dialog title="回复留言" center :visible.sync="dialogVisible">
      <el-button
        v-if="accreditChildren.editorMessageManage"
        type="primary"
        class="right"
        @click="innerVisible = true"
      >新建回复</el-button>
      <el-dialog width="600" center title="新建回复" :visible.sync="innerVisible" append-to-body>
        <el-input v-model="textarea" type="textarea" :rows="4" placeholder="请输入内容" resize="none" />
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button :disabled="!textarea.length" type="primary" @click="submitAnswer">确 定</el-button>
        </div>
      </el-dialog>
      <el-table :data="tableData1" style="width: 100%">
        <el-table-column prop="content" label="回复内容" />
        <el-table-column prop="respondent" label="回复人" />
        <el-table-column prop="creationTime" label="回复时间" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span v-if="scope.row.id">
              <el-button type="danger" icon="el-icon-delete" @click="deleteInfo1(scope.row)">删除</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import mmUrl from '~/utils/utilUrl';
import Pagination from '~/components/commom/pagination';
import {
  _currentChange,
  _sizeChange,
  _changeTable,
  _deleteMethods,
  _searchInfo,
  reduceArr,
  changeTableHeight,
  createDics
} from '~/utils/util';

export default {
  components: {
    Pagination
  },
  data() {
    return {
      textarea: '',
      tableData1: [],
      innerVisible: false,
      dialogVisible: false,
      loading: true,
      tableData: [],
      totalCount: 0,
      changeSelectOr: false,
      totalCount1: 0,
      accreditChildren: {},
      page1: {
        page: {
          maxResultCount: 0,
          pageNo: 0,
          pageSize: 10,
          skipCount: 0
        },
        questionId: ''
      },
      page: {
        maxResultCount: 0,
        pageNo: 0,
        pageSize: 10,
        skipCount: 0
      },
      copySearchInfo: {
        nickName: '',
        projectName: '',
        type: 0
      },
      searchInfo: {
        nickName: '',
        projectName: '',
        type: 0
      }
    }
  },
  mounted() {
    this.getInitTableDate()
    const result = JSON.parse(sessionStorage.getItem('menu'))
    this.accreditArr = reduceArr(result, '/' + this.$route.name)
    this.accreditChildren = createDics(
      this.accreditArr.children,
      'permissionCode'
    )
  },
  methods: {
    submitAnswer() {
      this.$post({
        url: mmUrl.answer.create,
        data: {
          item: {
            content: this.textarea,
            questionId: this.page1.questionId
          }
        }
      }).then(res => {
        this.innerVisible = false
        this.getAnswer(res.item.questionId)
      })
    },
    handleClose() {
      this.dialogVisible = false
    },
    getAnswer(id) {
      this.page1.questionId = id
      this.$post({
        url: mmUrl.answer.pageLoad,
        data: this.page1
      }).then(res => {
        this.dialogVisible = true
        this.tableData1 = res.items.items
        this.totalCount1 = res.items.totalCount
      })
    },
    getInitTableDate() {
      this.$post({
        url: mmUrl.question.pageLoad,
        data: {
          nickName: '',
          page: this.page,
          projectName: '',
          type: 0
        }
      }).then(res => {
        this.loading = false
        this.tableData = res.items.items
        this.totalCount = res.items.totalCount
        changeTableHeight(this)
      })
    },
    deleteInfo(row) {
      const that = this
      _deleteMethods(mmUrl.question.delete, row, that).then(() => {
        that.searchInfoMation('no')
      })
    },
    deleteInfo1(row) {
      const that = this
      _deleteMethods(mmUrl.answer.delete, row, that).then(() => {
        this.getAnswer(this.page1.questionId)
      })
    },
    searchInfoMation(res) {
      this.copySearchInfo = JSON.parse(JSON.stringify(this.searchInfo))
      const result = _searchInfo(res, this.page, this.copySearchInfo)
      this.changeTableData(result)
    },
    changeTableData(res) {
      const that = this
      _changeTable(mmUrl.question.pageLoad, res, that)
    },
    handleSizeChange(val) {
      const result = _sizeChange(val, this.page, this.copySearchInfo)
      this.changeTableData(result)
    },
    handleCurrentChange(val) {
      const result = _currentChange(val, this.page, this.copySearchInfo)
      this.changeTableData(result)
    }
  }
}
</script>
